<template>
<window ref="win" title="禁止退费班级">
    <div class="body">
        <div class="am-u-sm-12 am-form ">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                <div class="am-form-group">
                <select2  v-model="query.areaTeamId" :options="areaTeams" >
                    <option value="">区域</option>
                </select2>
                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                <div class="am-form-group">
                <select2  v-model="query.periodId" :options="periods">
                    <option value="">期数</option>
                </select2>
                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-u-end">
                <div class="am-form-group">
                <button type="button" class="am-btn am-btn-default am-btn-success "
                        @click="search" ><span class="am-icon-search"></span>&nbsp;查询
                </button>
                </div>
            </div>

        </div>
        <el-table
            :data="tableData"
            border
            stripe
            max-height="500"
            style="min-width: 100% ">
            <el-table-column
            prop="areaTeamName"
            label="区域"
            min-width="100">
            </el-table-column>
            <el-table-column
            prop="busTeamName"
            label="业务组"
            min-width="200">
            </el-table-column>
            <el-table-column
            prop="gradeNames"
            label="年级"
            min-width="100">
            </el-table-column>
            <el-table-column
            prop="periodName"
            label="期数"
            min-width="100">
            </el-table-column>
            <el-table-column
            label="操作"
            width="120">
            <template scope="scope">
                <el-button size="small"  @click="del(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>

    </div>
</window>

</template>




<script>
  import io from '../../lib/io'
  import conf from '../../lib/conf'
  import util from '../../lib/util'
  import storage from '../../lib/storage'
  export default{
    data: function () {
      return {
            query:{
                areaTeamId:"",
                periodId:"",
            },
            tableData:[],
            periods:[],
      }
    },
    created(){
        this.loadTableData()
    },
    mounted: function () {
     
    },
    computed:{
        areaTeams: function () {
            var options = ( this.$root.config.areaTeams || [] )
              .map(function (item) {
                return {value: item.areaTeamId, text: item.name}
              })
            return options
          },
        busTeams: function () {
            var options = ( ( this.query.areaTeamId  ) ? ( this.$root.config.groupBusTeams[this.query.areaTeamId] || [] ) : [] )
              .map(function (item) {
                return {value: item.busTeamId, text: item.name}
              })
            this.query.busTeamId = ''
            return options
        },
    },
    watch:{
        'query.areaTeamId':function(){
            this.loadPeriodData()
        }
    },
    methods: {
        search(){
            this.loadTableData()
        },
      loadTableData() {
         let param = {...this.query}
        io.post(io.queryRefundSettings,param,(ret)=>{
            if(ret.success){
                this.tableData = ret.data
            }
        })
      },
      loadPeriodData: function () {
        io.post(io.apiAdminPeriodListForAreaTeam, {
          areaTeamId : this.query.areaTeamId
        },  (ret)=> {
          if (ret.success) {
            this.periods = ret.data.map( (item)=> {
              return {value: item.periodId, text: item.periodName }
            })
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      show:function(){
        this.$refs.win.show(
          {width:1000,height:200}
        )
        this.loadTableData()
      },
      del(row){
          this.$confirm('确定删除', ()=> {
                io.post(io.deleteRefundSetting,{
                refundSettingId :row.refundSettingId
              },(ret)=>{
                if(ret.success){
                  this.loadTableData()
                  this.$alert('删除成功')
                }else{
                  this.$alert(ret.desc)
                }
            })
          })
      },
      handleCancel() {
        this.$refs.win.close()
      },
    },

  }


</script>
<style scoped>
.body{
    margin-top:20px;
}
  .am-table>tbody>tr>td, .am-table>tbody>tr>th{
    text-align: left;
  }
  .bgColor {
    background-color: #eee;
    text-align: center!important;
  }
</style>